<template>
	<div class="regulator-weekly-report">
		<!-- 一周安全态势 -->
		<div class="card-content week-security-situation">
			<div id="situationChart"></div>
		</div>
		<!-- 本周最危险单位Top5 -->
		<div class="card-content week-dangerous-leaderboard">
			<div class="content-top-title">
				<p class="title-text">本周最危险单位Top5</p>
				<p class="title-desc">按本周“告急”总时长计算</p>
			</div>
			<div class="dangerous-leaderboard-content">
				<ul v-if="dataObj.weekDangerTop5 && dataObj.weekDangerTop5.length > 0" class="top-list">
					<li v-for="(item, i) in dataObj.weekDangerTop5" class="top-list-item" :key="i">
	        			<div class="item-index">{{ i+1 }}</div>
	        			<div class="item-desc">
							<p>{{ item.orgName }}</p>
							<p>{{ item.desc }}</p>
							<el-progress :percentage="(item.time/dataObj.securitySituation.urgentHour)*100" :show-text="false" :stroke-width="12"></el-progress>
	        			</div>
	        		</li>
				</ul>
				<div v-else class="no-data-img">
	       			<img width="100%" height="100%" src="resource/ilink_1566461028161.png"/>
				</div>
			</div>
		</div>
		<!-- 高危信号回顾 -->
		<div class="card-content fireHazard-content">
			<div class="content-top-title">
				<p class="title-text">高危信号回顾</p>
			</div>
			<div class="statistics-quantity">
				<div class="statistics-item">
					<span>{{ highRiskSignal.lastWeekTime }}</span>
					<p>上周总数</p>
				</div>
				<div class="statistics-item">
					<span>{{ highRiskSignal.thisWeekTime }}</span>
					<p>本周总数</p>
				</div>
				<div class="statistics-item">
					<span :class="{'color-1': highRiskSignal.result <= 0, 'color-3': highRiskSignal.result > 0}">{{ highRiskSignal.percent + '%' }}</span>
					<p>{{ highRiskSignal.resultTxt }}</p>
				</div>
			</div>
			<div class="fireHazard-chart">
				<div id="fireHazardChart"></div>
			</div>
		</div>
		<!-- 重大问题回顾 -->
		<div class="card-content keyIssues-content">
			<div class="content-top-title">
				<p class="title-text">重大问题回顾</p>
			</div>
			<div class="content-detail-title">
				<img src="resource/ilink_1565765076954.png" 
					style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;">
				重大问题周环比
			</div>
			<div class="statistics-quantity">
				<div class="statistics-item">
					<span>{{ majorIssuesProportion.lastWeekTime }}</span>
					<p>上周总数</p>
				</div>
				<div class="statistics-item">
					<span>{{ majorIssuesProportion.thisWeekTime }}</span>
					<p>本周总数</p>
				</div>
				<div class="statistics-item">
					<span :class="{'color-1': majorIssuesProportion.result <= 0, 'color-3': majorIssuesProportion.result > 0}">{{ majorIssuesProportion.percent + '%' }}</span>
					<p>{{ majorIssuesProportion.resultTxt }}</p>
				</div>
			</div>
			<div class="keyIssues-chart">
				<div id="keyIssuesChart" class="chart-content" style="width: 100%;"></div>
			</div>
			<div class="keyIssues-leaderboard">
				<div class="content-detail-title">
					<img src="resource/ilink_1565765076954.png" 
					style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;">
					重大问题单位Top5
				</div>
				<ul v-if="dataObj.majorIssuesOrgTop5 && dataObj.majorIssuesOrgTop5.length > 0" class="top-list">
					<li v-for="(item, i) in dataObj.majorIssuesOrgTop5" class="top-list-item" :key="i">
						<div class="item-index">{{ i+1 }}</div>
						<div class="item-content">
							<div>{{ item.orgName }}</div> 
							<div>{{ item.number }}次</div>
						</div>
					</li>
				</ul>
				<div v-else class="no-data-img">
	       			<img width="100%" height="100%" src="resource/ilink_1564368528154.png"/>
				</div>
			</div>
		</div>
		<!-- 隐患整改回顾 -->
		<div class="card-content hiddenCheck-content">
			<div class="content-top-title">
				<p class="title-text">隐患整改回顾</p>
				<p class="title-desc">“隐患险于明火，防范胜于救灾！”</p>
			</div>
			<div class="statistics-quantity statistics-two">
				<div class="statistics-item">
					<span>{{ hiddenDangerReform.total }}</span>
					<p>提报隐患</p>
				</div>
				<div class="statistics-item">
					<span>{{ hiddenDangerReform.maxNumber }}</span>
					<p>较大及以上</p>
				</div>
			</div>
			<div class="hiddenCheck-chart">
				<div id="hiddenCheckChart"></div>
			</div>
			<div class="hiddenCheck-detail">
				<div class="hiddenCheck-detail-item">
					<template v-if="hiddenDangerReform.maxOrgName">
						<p class="item-tilte">本周隐患提报最多的社会单位</p>
						<p class="item-desc">
							{{ hiddenDangerReform.maxOrgName }}，总计提报【{{ hiddenDangerReform.maxNumber }}】次
						</p>
					</template>
					<template v-else>
						<p class="item-tilte">本周没有提报隐患的社会单位</p>
						<p v-if="hiddenDangerReform.notHiddenDangerOrgName" class="item-desc">
							共有{{ hiddenDangerReform.notHiddenDangerOrgNumber }}家，包括{{ hiddenDangerReform.notHiddenDangerOrgName.replace( /[,]/g, '、') }}
						</p>
					</template>
				</div>
			</div>
			<div class="duty-detail-picture duty-detail-picture-hidden">
				<div class="content-detail-title">
					<img src="resource/ilink_1565765076954.png" 
					style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;">
					典型隐患照片
				</div>
				<div v-if="dataObj.hiddenDangerPics" class="pic-item" >
					<img v-for="(item, i) in hiddenDangerReform.hiddenDangerPics.split(',')" :src="item" :key="i" />
				</div>
				<div v-else class="no-data-img">
					<img width="100%" height="100%"
						src="resource/ilink_1564368528154.png">
				</div>
			</div>
		</div>
		<!-- 消控室值守回顾 -->
		<div class="card-content control-room-review">
			<div class="content-top-title">
				<p class="title-text">消控室值守回顾</p>
				<p class="title-desc">“消控室有人值守是消防管理的基石”</p>
			</div>
			<div class="statistics-quantity statistics-two">
				<div class="statistics-item">
					<span>{{ controlRoom.orgExistPersonTotal }}</span>
					<p>不间断值守单位总数</p>
				</div>
				<div class="statistics-item">
					<span>{{ controlRoom.orgNotPersonTotal }}</span>
					<p>发生无人值守情况单位数</p>
				</div>
			</div>
			<div class="duty-detail">
				<div class="duty-detail-org">
					<div class="content-detail-title">
						<img src="resource/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;">
						单位无人值守最长时间排名
					</div>
					<ul v-if="controlRoom.personnelDutyTop && controlRoom.personnelDutyTop.length > 0">
						<li v-for="(item, i) in controlRoom.personnelDutyTop" :key="i">
							<div class="item-index">{{ i+1 }}</div>
							<div class="item-content">
								<div>{{ item.orgName }}</div>
								<div>{{ item.desc }}</div>
							</div>
						</li>
					</ul>
					<div v-else class="no-data-img">
	          		  	<img width="100%" height="100%"
	          		     	src="resource/ilink_1564368528154.png">
	          		 </div>
				</div>
				<div class="duty-detail-picture">
					<div class="content-detail-title">
					<img src="resource/ilink_1565765076954.png" 
				style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;">
					典型无人值守照片</div>
					<div v-if="controlRoom.notPersonnelDutyPics && controlRoom.notPersonnelDutyPics.length > 0" class="pic-item" id="dutyPic">
						<img v-for="(item, i) in controlRoom.notPersonnelDutyPics.split(',')" :src="item" :key="i" />
					</div>
					<div v-else class="no-data-img">
	          		  	<img width="100%" height="100%"
	          		     	src="resource/ilink_1564368528154.png">
	          		 </div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'SingleWeekly',
	props: ['reportData'],
	data() {
		return {
			dataObj: {},
			highRiskSignal: {}, // 高危信号回顾数据
			majorIssuesProportion: {}, // 重大问题回顾数据
			hiddenDangerReform: {}, // 隐患整改回顾数据
			controlRoom: {}, // 消控室值守回顾数据
		}
	},
	mounted() {
		if(this.reportData) {
			this.dataObj = JSON.parse(this.reportData)
			this.createSituationChart();
			this.dealWithHighOrMajor(this.dataObj.highRiskSignal, 'highRiskSignal', this.createFireHazardChart)
			this.dealWithHighOrMajor(this.dataObj.majorIssuesProportion, 'majorIssuesProportion', this.createKeyIssuesChart)
			this.deatWithHiddenDangerReform()
			this.dealWithControlRoom()
		}
	},
	methods: {
		// 一周安全趋势图
		createSituationChart() {
			let dom = document.getElementById('situationChart');
			let situationChart = this.$echarts.init(dom);
			let basicData = [
				{ 'name': '告急时长','value': this.dataObj.securitySituation.urgentHour },
				{ 'name': '危险时长','value': this.dataObj.securitySituation.dangerHour },
				{ 'name': '安全时长','value': this.dataObj.securitySituation.securityHour }
			];
			let options = {
				title : {
					text : '一周安全态势'
				},
				color : [ '#FA7B59', '#FFC95D', '#75CD7E', ],
				legend : {
					orient : 'vertical',
					x : '60%',
					y : 'center',
					data : [{
								name : '告急时长',
								icon : 'image://resource/rdspFile_1559699271314.png',
							},{
								name : '危险时长',
								icon : 'image://resource/rdspFile_1559699285778.png',
							},{
								name : '安全时长',
								icon : 'image://resource/rdspFile_1559699251651.png ',
							}
						],
					formatter: function(name){
						var target; 
						for (var i = 0, l = basicData.length; i < l; i++) {
							if (basicData[i].name == name) { 
								target = basicData[i].value; 
							} 
						} 
						var arr = [ '{a|'+name+'}', '{b|'+target+'小时}', ]; 
						return arr.join('\n');
					},
					textStyle:{ 
						rich:{ 
							a:{ 
								fontSize:12, 
								verticalAlign:'bottom', 
								align:'left', 
								color : '#999999',
								fontWeight:600,
								padding:[0,0,20,0]
							},
							b:{ 
								fontSize:14, 
								align:'left',
								color : '#333333',
								lineHeight:25
							}
						}
					}
				},
				series : [ {
					type : 'pie',
					radius : [ '40%', '45%' ],
					center : [ '35%', '50%' ],
					labelLine: {
						normal: {
							length: 10,
							lineStyle: {
								color: '#E1E1E1'
							}
						}
					},
					label: {
						normal: {
							formatter: '{d}%',
							borderRadius: 4,
							padding: [0, -20],
						}
					},
					data: basicData
				} ]
			};
			situationChart.setOption(options, true);
		},
		// 处理高危信号回顾/重大问题回顾数据
		dealWithHighOrMajor(obj, key, creatEChart) {
			if(obj) {
				let array1 = []
				let array2 = []
				let result = parseInt(obj.lastWeekTime) - parseInt(obj.thisWeekTime)

				obj.result = result
				obj.resultTxt = result >0 ? '降低' : '增长'
				this[key] = obj

				for (let i = 0; i < obj.thisWeek.length; i++) {
					array1.push(typeof(obj.thisWeek[i].value) === 'undefined' ? obj.thisWeek[i].number : obj.thisWeek[i].value);
				}
				for (let j = 0; j < obj.lastWeek.length; j++) {
					array2.push(typeof(obj.lastWeek[j].value) === 'undefined' ? obj.lastWeek[j].number : obj.lastWeek[j].value);
				}
				
				creatEChart({
					thisWeek: array1,
					lastWeek: array2	
				})
			}
		},
		// 高危信号图表
		createFireHazardChart(data) {
			let dom = document.getElementById("fireHazardChart");
			let fireHazardChart = this.$echarts.init(dom);
			let option = {
				tooltip : {
					backgroundColor : '#fff',
					borderColor : '#F3F3F3C7', // 提示边框颜色
					borderRadius : 6, // 提示边框圆角，单位px，默认为4
					borderWidth : 1,
					position : function(p) { //其中p为当前鼠标的位置
						return [ p[0] - 28, p[1] - 70 ];
					},
					padding : 10,
					trigger : 'axis',
					formatter : function(params) {
						res = "<span style='color:#999999;font-size:10px;float:left;'>"
								+ params[1].seriesName
								+ ": <label>"
								+ params[1].value
								+ "</label></span><br/>"
								+ "<span style='color:#999999;font-size:10px;float:left;'>"
								+ params[0].seriesName
								+ ": <label>"
								+ params[0].value + "</label></span><br/>"
						return res;
					},
					axisPointer : {
						type : 'shadow',
						axis : 'x',
						z : 2,
					},
					extraCssText : 'box-shadow: 0px 0px 15px 0px rgba(129,129,129,0.2);height:40px;'
				},
				xAxis : [ {
					type : 'category',
					axisTick : {
						show : false
					},
					scale : true,
					splitLine : {
						show : false,
					},
					axisLine : {
						show : false,
					},
					data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
				} ],
				yAxis : [ {
					type : 'value',
					splitNumber : 2,
					scale : true,
					show : false,
					splitLine : {
						show : false
					}
				} ],
				series : [ {
					name : '上周',
					type : 'line',
					areaStyle : {
						normal : {
							color : 'rgba(208,215,255,0.6)'
						}
					},
					itemStyle : {
						normal : {
							lineStyle : {
								color : '#D0D7FF'
							}
						}
					},
					symbol : 'none',
					smooth : true,
					data : data.lastWeek
				}, {
					name : '本周',
					type : 'line',
					label : {
						normal : {}
					},
					areaStyle : {
						normal : {
							color : 'rgba(255,255,255,0.7)'
						}
					},
					itemStyle : {
						normal : {
							lineStyle : {
								color : '#3B82D6'
							}
						}
					},
					symbol : 'none',
					smooth : true,
					data : data.thisWeek
				} ]
			};
			fireHazardChart.setOption(option, true);
		},
		// 重大问题图表
		createKeyIssuesChart(data) {
			let that = this
			let dom = document.getElementById("keyIssuesChart");
			let keyIssuesChart = this.$echarts.init(dom);
			let map4_data1 = [ 120, 332, 51, 34, 90 ];
			let map4_data2 = [ 220, 482, 191, 234, 290 ];
			let options = {
				color : [ '#E1E1E1', '#4F8DD4' ],
				tooltip : {
					backgroundColor : '#fff',
					borderColor : '#F3F3F3C7', // 提示边框颜色
					borderRadius : 6, // 提示边框圆角，单位px，默认为4
					borderWidth : 1,
					position : function(p) { //其中p为当前鼠标的位置
						return [ p[0] - 80, p[1] - 70 ];
					},
					trigger : 'axis',
					padding : 10,
					formatter : function(params) {
						return "<span style='color:#999999;font-size:10px;float:left;'>"
								+ params[1].seriesName
								+ ": <label>"
								+ params[1].value
								+ "</label></span><br/>"
								+ "<span style='color:#999999;font-size:10px;float:left;'>"
								+ params[0].seriesName
								+ ": <label>"
								+ params[0].value + "</label></span><br/>";
					},
					textStyle : {
						align : 'center'
					},
					extraCssText : 'box-shadow: 0px 0px 15px 0px rgba(129,129,129,0.2);height:40px;'
				},
				calculable : true,

				xAxis : [ {
					type : 'category',
					boundaryGap:true,
					axisTick : {
						show : false
					},
					scale : true,
					splitLine : {
						show : false,
					},
					axisLine : {
						show : false,
					},
					axisLabel : {
						interval: 0,  
						formatter : function(params) {
							var newParamsName = "";
							var clientWidth = document.body.clientWidth; // 可见区域宽度
							var paramsNameNumber = params.length;

							if (clientWidth >= 400) {
								if (paramsNameNumber >= 4) {
									newParamsName = that.addWrap(0, 4, paramsNameNumber,
											params);
								} else {
									newParamsName = params;
								}
							} else if (clientWidth <= 350) {
								if (paramsNameNumber >= 2) {
									newParamsName = that.addWrap(0, 2, paramsNameNumber,
											params);
							
								} else {
									newParamsName = params;
								}
							} else {
								if (paramsNameNumber >= 3) {
									newParamsName = that.addWrap(0, 3, paramsNameNumber,
											params);
								} else {
									newParamsName = params;
								}
							}
							return newParamsName;
						}
					},
					data : [ '消控室无人值守', '消防通道堵塞', '重点消防设施', '消防系统完好性缺失', '日常巡检持续未完成' ]
				} ],
				yAxis : [ {
					type : 'value',
					splitNumber : 2,
					scale : true,
					show : false,
					splitLine : {
						show : false
					}
				} ],
				series : [ {
					name : '上周',
					type : 'bar',
					barGap : 0,
					data : data.lastWeek,
				
				}, {
					name : '本周',
					type : 'bar',
					data : data.thisWeek,
					
				} ]
			};

			keyIssuesChart.setOption(options, true);
		},
		// 处理隐患整改数据
		deatWithHiddenDangerReform() {
			let obj = this.dataObj.hiddenDangerReform

			if(obj) {
				let percentageNum = 0;

				if(obj.total != 0){
					percentageNum = Math.round((obj.maxLevel/obj.total).toFixed(2)*100);
				}
				obj.percentageNum = percentageNum
				this.hiddenDangerReform = obj
				this.createhiddenCheckChart(obj.maxLevel, percentageNum)
			}

		},
		// 隐患整改图表
		createhiddenCheckChart(value, percentageNum) {
			let dom = document.getElementById('hiddenCheckChart');
			let hiddenCheckChart = this.$echarts.init(dom);
			let option = {
				color : [ '#FA7B59', '#F1F1F1' ],
				title: {
					top: '40%',
					text: `${percentageNum}%`,
					subtext: '较大及以上',
					x: 'center',
					y: 'center',
					textStyle: {
						color: 'rgba(250, 127, 95, 1)',
						fontSize: 34,
						lineHeight: 20
					},
					subtextStyle: {
						fontSize: 14,
						lineHeight: 20
					}
				},
				series : [ {
					name : '',
					type : 'pie',
					radius : [ '50%', '60%' ],
					center : [ '50%', '50%' ],
					avoidLabelOverlap : false,
					label : {
						normal : {
							show : false,
							position : 'center'
						},
						emphasis : {
							show : true,
							textStyle : {
								fontSize : '30',
								fontWeight : 'bold'
							}
						}
					},
					labelLine : {
						normal : {
							show : false
						}
					},
					data : [ {
						value : value,
						name : ''
					}, {
						value : 100 - value,
						name : ''
					}, ]
				} ]
			};
			hiddenCheckChart.setOption(option, true);
		},
		// 处理消控室值守回顾数据
		dealWithControlRoom() {
			let obj = this.dataObj.controlRoom

			this.controlRoom = obj
		},
		// 增加换行符
	 	addWrap(startNum, endNum, total, str) {
			var newStr = "";
			if (total <= endNum) {
				newStr = str;
			} else {
				newStr = str.substring(startNum, endNum);
				var remainNum = total - endNum;
				var newStartNum = endNum;
				var newEndNum = endNum + endNum;
				if (remainNum <= endNum) {
					newStr = newStr + "\n" + str.substring(newStartNum, total);
				} else {
					newStr = newStr + "\n" + str.substring(endNum, newEndNum);
					var stri = this.addWrap(newStartNum, newEndNum, total, str
							.substring(endNum, total));
					newStr = newStr + "\n" + stri;
				}
			}

			return newStr;
		}
	}
}
</script>
<style lang="scss">
.regulator-weekly-report {
	width: 100%;
	.card-content {
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(225, 225, 225, 0.4);
		box-shadow: 0px 0px 15px 0px rgba(205, 205, 205, 0.2);
		border-radius: 10px;
		padding: 20px 10px;
		margin: 20px 0px;
		.content-top-title {
			margin-bottom: 20px;
			.title-text {
				font-size: 18px;
				font-weight: bold;
				color: rgba(68, 68, 68, 1);
			}
			.title-content {
				font-size: 14px;
				color: rgba(153, 153, 153, 1);
			}
		}
		.top-list {
			margin-top: 10px;
			list-style: none;
			.top-list-item {
				display: flex;
				margin-bottom: 10px;
				.item-index {
					margin: 0 10px;
					width: 23px;
					height: 23px;
					line-height: 23px;
					background: rgba(35, 128, 195, 0.1);
					border-radius: 50%;
					text-align: center;
					font-size: 12px;
					font-weight: 600;
					color: rgba(59, 130, 214, 1);
				}
				.item-desc {
					width: calc(100% - 43px);
				}
				.item-content {
					display: flex;
					justify-content: space-between;
					width: calc(100% - 43px);
				}
			}
		}
		.statistics-quantity {
			display: flex;
			justify-content: space-between;
			.statistics-item {
				width: 33%;
				text-align: center;
				span {
					font-size: 24px;
				}
				p {
					font-size: 14px;
					color: rgba(153, 153, 153, 1);
				}
			}
			&.statistics-two {
				.statistics-item {
					width: 50%;
				}
			}
		}
		.content-detail-title {
			margin-top: 10px;
		}
	}
	#situationChart,
	#keyIssuesChart,
	#hiddenCheckChart {
		width: 100%;
		height: 240px;
	}
	.hiddenCheck-chart {
		position: relative;
		.hiddenCheck-chart-info {
			position: absolute;
			top: 90px;
			width: 100%;
			height: 160px;
			text-align: center;
		}
	}
}
</style>
